<template>
  <view class="art">
    <view class="Navbar" style="margin-bottom: 100rpx">
      <view class="top" @click="selected" :input="input">
        <image
          class="flag"
          :src="input.img ? input.img : '/static/country/EN.png'"
          mode="scaleToFill"
        />
        <text class="language">{{ input.text ? input.text : "EN" }}</text>
        <image
          class="pull-down"
          src="/static/art/Frame.png"
          mode="scaleToFill"
        />
      </view>
      <view class="tittle">{{ t("art.title") }}</view>
      <view class="text">{{ addrs }}</view>
    </view>
    <!-- 下拉框 -->
    <view
      class="select"
      v-show="isSelect"
      style="position: fixed; top: 7%; left: 5%"
    >
      <view
        class="item"
        @click="
          () => handleChange('../../static/country/EN.png', 'EN', 'en', 'en')
        "
      >
        <image
          class="img"
          src="../../static/country/EN.png"
          mode="scaleToFill"
        />
        <text>EN</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/SouthKorea.png',
              '한국어',
              'hy',
              'kr'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/SouthKorea.png"
          mode="scaleToFill"
        />
        <text>한국어</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/flag-circle-Germany.png',
              'Deutsch',
              'dy',
              'de'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/flag-circle-Germany.png"
          mode="scaleToFill"
        />
        <text>Deutsch</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/gildata-color-italy.png',
              'Italiano',
              'yy',
              'it'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/gildata-color-italy.png"
          mode="scaleToFill"
        />
        <text>Italiano</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange('../../static/country/Рос.png', 'Россия', 'ey', 'ru')
        "
      >
        <image
          class="img"
          src="../../static/country/Рос.png"
          mode="scaleToFill"
        />
        <text>Россия</text>
      </view>
      <view
        class="item"
        @click="
          () =>
            handleChange(
              '../../static/country/flag_TR_circle.png',
              'T ürkiye',
              'ty',
              'tr'
            )
        "
      >
        <image
          class="img"
          src="../../static/country/flag_TR_circle.png"
          mode="scaleToFill"
        />
        <text>T ürkiye</text>
      </view>
      <view
        class="item"
        @click="
          () => handleChange('../../static/country/jpn.png', 'ja', 'ja', 'ja')
        "
      >
        <image
          class="img"
          src="../../static/country/jpn.png"
          mode="scaleToFill"
        />
        <text>jp</text>
      </view>
    </view>
    <!-- 下拉框 -->
    <!-- 标题切换 -->
    <!-- <view class="content">
      <view class="left">
        <view>{{ t('art.ava') }}</view>
        <text>0</text>
      </view>
      <view class="middle">
        <view>{{ t('art.free') }}</view>
        <text>0</text>
      </view>
      <view class="right">
        <view>{{ t('art.today') }}</view>
        <text>0</text>
      </view>
    </view> -->
    <scroll-view scroll-y class="abc">
      <view
        @click="navigator(item.category_id)"
        class="list"
        v-for="(item, index) in list"
        :key="index"
        :style="{ backgroundImage: bgList[index % 4] }"
      >
        <image class="profile" :src="item.picture" mode="scaleToFill" />
        <view class="level">
          <text class="text">{{ item.category_name }}</text>
          <view class="price"
            >{{ item.category_arrange }}<text>USDT</text></view
          >
          <text class="text1">{{ t("art.click") }}</text>
        </view>
        <image class="spread" src="/static/art/Frame1.png" mode="scaleToFill" />
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed, nextTick, toRaw } from "vue";
import { showToast } from "vant";

import { useI18n } from "vue-i18n";
import api from "../../networks/apis";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "../../store/index";
const useStore = useUserStore();
import { switchNetwork } from "@/networks/web3/bsc.js";

//下拉框
const input = ref([""]);
const addrs = ref("");
const networkData = ref({
  chainId: "",
  chainName: "",
  rpcUrls: [],
  blockExplorerUrls: [],
  nativeCurrency: {
    symbol: "ETH",
    decimals: 18,
  },
}); //切换网络所需的信息对象
//点击下拉框选项
const handleChange = (img, text, a, lang) => {
  input.value = { img, text };
  isSelect.value = false;
  swtichLocale(a); //切换语言
  // 切换语言
  const getLanguage = async () => {
    const { data } = api.getLanguageAPI(lang);
    console.log("----->语言", data);
  };
  getLanguage();
};
const isSelect = ref(false); //下拉框显示隐藏
const selected = () => {
  isSelect.value = !isSelect.value;
};
//动态添加背景图
const bgList = [
  "url('/static/art/Rectangle 47.png')",
  "url('/static/art/Rectangle 48.png')",
  "url('/static/art/Rectangle 49.png')",
  "url('/static/art/Rectangle 50.png')",
];

//档位列表数组
const list = ref([]);
onMounted(async () => {});
onShow(async () => {
  const loc = useI18n().locale.value;
  if (loc == "en") {
    input.value.img = "../../static/country/EN.png";
    input.value.text = "EN";
  } else if (loc == "dy") {
    input.value.img = "../../static/country/flag-circle-Germany.png";
    input.value.text = "Deutsch";
  } else if (loc == "ey") {
    input.value.img = "../../static/country/Рос.png";
    input.value.text = "Россия";
  } else if (loc == "hy") {
    input.value.img = "../../static/country/SouthKorea.png";
    input.value.text = "한국어";
  } else if (loc == "ty") {
    input.value.img = "../../static/country/flag_TR_circle.png";
    input.value.text = "T ürkiye";
  } else if (loc == "yy") {
    input.value.img = "../../static/country/gildata-color-italy.png";
    input.value.text = "Italiano";
  } else if (loc == "ja") {
    input.value.img = "../../static/country/jpn.png";
    input.value.text = "ja";
  }
  const { data } = await api.getCategory();
  console.log(data, "档次信息");
  list.value = data;
  addrs.value =
    useStore.user.address.substring(useStore.user.address.length - 7) || "";
  nextTick(async () => {
    chains();
  });
});
const { t } = useI18n();

//跳转
// const navigator = (id) => {
//   uni.navigateTo({ url: `/pages/NFT/index?id=${id}` });
// };
const navigator = (id) => {
  uni.navigateTo({ url: `/pages/NFT/index?id=${id}` });
};

/**
 * 切换语言
 * @param currentLocale 当前选中的语言
 */
const { locale } = useI18n();
const swtichLocale = (currentLocale) => {
  localStorage.setItem("lang", currentLocale);
  locale.value = currentLocale;
};
//获取链的信息
const chains = () => {
  api.chains().then((res) => {
    if (res.code == 0) {
      console.log(res.data, "链信息");
      networkData.value.chainId = res.data.chain_id;
      networkData.value.chainName = res.data.name;
      networkData.value.rpcUrls = res.data.rpc_url;
      networkData.value.blockExplorerUrls = res.data.scan_url;
      // networkData.value.nativeCurrency = res.data.nativeCurrency
      if (window.ethereum.chainId != networkData.value.chainId) {
        setNetwork();
      }
    }
  });
};
//切换网络
const setNetwork = () => {
  console.log(networkData.value);
  switchNetwork(toRaw(networkData.value))
    .then((res) => {
      // showToast('Network connection successful');
      console.log("res==", res);
    })
    .catch((err) => {
      showToast("Network connection failure");
      console.log("err==", err);
    });
};
</script>

<style lang="scss" scoped>
.select {
  width: 252rpx;
  height: 452rpx;
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background-image: url("../static/country/Rectangle 33.png");
  background-size: cover;
  background-repeat: no-repeat;

  .item {
    margin-left: 40rpx;
    font-size: 22rpx;
    font-family: Arial, Arial;
    font-weight: 400;
    color: #ffffff;
    line-height: 26rpx;

    .img {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
    text {
      margin-top: 10rpx;
    }
  }

  position: fixed;
  z-index: 999;
}

.abc {
  height: 100vh;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);
}

.art {
  width: 750rpx;
  height: 100vh;
  // height: 1624rpx;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .Navbar {
    width: 100%;
    height: 110rpx;
    display: flex;
    align-items: center;
    padding: 70rpx 30rpx 2rpx 30rpx;
    background: transparent;
    justify-content: space-between;
    margin-bottom: 30rpx;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .flag {
        width: 44rpx;
        height: 44rpx;
      }

      .language {
        font-size: 22rpx;
        font-family: Inika, Inika;
        font-weight: 400;
        color: #ffffff;
        line-height: 26rpx;
        height: 28rpx;
        margin: 0 6rpx;
      }

      .pull-down {
        width: 40rpx;
        height: 40rpx;
      }
    }

    .tittle {
      width: 280rpx;
      height: 32rpx;
      font-size: 28rpx;
      /* margin-left: 178rpx; */
      font-family: Arial, Arial;
      font-weight: bold;
      color: #ffffff;
      line-height: 33rpx;
      text-align: center;
      padding-left: 50rpx;
    }

    .text {
      width: 168rpx;
      height: 72rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 400;
      color: #ffffff;
      line-height: 72rpx;
      background-image: url("/static/Withdrawal/Rectangle 1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      margin: 0;
    }
  }

  .content {
    width: 690rpx;
    height: 168rpx;
    background-image: url("/static/art/Rectangle 33.png");
    background-size: cover;
    font-size: 22rpx;
    font-family: Arial, Arial;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    line-height: 26rpx;
    margin: 44rpx auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .left,
    .middle,
    .right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      text {
        font-size: 40rpx;
        font-family: Arial, Arial;
        font-weight: 900;
        color: #ffffff;
        line-height: 47rpx;
        padding-top: 35rpx;
      }
    }
  }

  .list {
    width: 688rpx;
    height: 286rpx;
    background-image: url("/static/art/Rectangle 47.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .profile {
      width: 182rpx;
      height: 182rpx;
    }

    .level {
      .text {
        display: block;
        margin-bottom: 10rpx;
        // width: 150rpx;
        height: 68rpx;
        font-size: 38rpx;
        font-family: Arial, Arial;
        font-weight: 900;
        line-height: 55rpx;
        background: linear-gradient(180deg, #ffffff 0%, #b7fffb 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .price {
        height: 46rpx;
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: 900;
        color: #ffffff;
        line-height: 25rpx;
        display: flex;
        justify-content: start;

        text {
          font-weight: 400;

          color: rgba(255, 255, 255, 0.5);
        }
      }

      .text1 {
        height: 28rpx;
        font-size: 24rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.5);
        line-height: 28rpx;
      }
    }

    .spread {
      width: 40rpx;
      height: 40rpx;
      // margin-left: 150rpx;
    }
  }
}
</style>
